---
import Container from "@components/container.astro";
import Link from "@components/ui/link.astro";
import Dropdown from "./dropdown.astro";
import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
import { Image } from "@astrojs/image/components";
import logo from "@assets/logo.png";
import search from "@assets/search.png";
import ezSip from '@assets/product/EZSIP@.png'

const menuitems = [
  {
    title: "产品中心",
    path: "/plan",
    children: [
      { title: "负载点电源", path: "/productDetail", EN: 'Point Of Load Converter' },
      { title: "电源控制器", path: "#", EN: 'Controller' },
      { title: "智能功率级芯片", path: "#", EN: 'Smart Power Stage' },
      { title: "微电源模块", path: "#", EN: 'Micro Power Module',icon: ezSip },
      { title: "智能功率电源块", path: "#", EN: 'Smart Power Block' },
    ],
  },
  {
    title: "应用方案",
    path: "/programme",
    children: [
      { title: "汽车电子", path: "/automotiveElectronics"},
      { title: "工业设备", path: "#"},
      { title: "数据中心", path: "/" },
      { title: "光模块", path: "#"},
      { title: "AI人工智能", path: "/" },
      { title: "轨道交通", path: "#" },
      { title: "电力电网", path: "/" },
      { title: "医疗设备", path: "#"},
    ]
  },
  {
    title: "设计资源",
    path: "/designResources",
    children: [
      { title: "元器件封装库", path: "/componentPackagingLibrary" },
      { title: "评估板", path: "/productEvaluationBoard"},
      { title: "封装资源", path: "/encapsulationResources" }
    ],

  },
  {
    title: "质量与可靠性",
    path: "/",
  },
  {
    title: "客户支持",
    path: "/customerSupport",
  },
  {
    title: "关于我们",
    path: "/aboutUs",
  },
  {
    title: "我的艾诺",
    path: "/aboutUs",
  },
];
---

<Container class="container rounded-[8px] header">
  <header
    class="flex flex-col lg:flex-row justify-between items-center my-5 flex-wrap">
    <div class="w-full flex justify-between items-center pt-[14px]">
      <a href="/" class="text-lg ml-[24px]">
        <Image
          src={logo}
          alt={"logo"}
          class="inline-block w-[124px] h-[54px]"
        />
      </a>
      <div class="w-[660px] flex">
        <input
          type="text"
          placeholder="艾诺半导体"
          class="w-[452px] h-[26px] pl-[17px] box-border input"
        />
      <button
        class="ml-[15px] mr-[19px] bg-brown w-[36px] h-[26px] rounded-[2px] flex items-center justify-center ">
        <Image src={search} alt={""} class="w-[22px] h-[22px]" />
      </button>
      <span class="text-brown text-[16px] mr-[9px] register cursor-pointer">登录注册</span>
      <span class="text-[16px] switch">
        <span class="text-brown">CH</span>/<span>EN</span>
      </span>
    </div>
    </div>
  </header>
  <Astronav>
    <div class="flex w-full lg:w-auto items-center justify-between">
     
      <div class="block lg:hidden">
        <MenuIcon class="w-4 h-4 text-gray-800" />
      </div>
    </div>

    <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0 z-20">
      <ul class="flex flex-col lg:flex-row w-full">
        {
          menuitems.map((item, index) => (
            <>
              {item.children && (
                <Dropdown
                  title={item.title}
                  path={item.path}
                  children={item.children}
                  lastItem={index === menuitems.length - 1}
                />
              )}

              {!item.children && (
                <li class="h-[40px] text-[16px] flex-1 flex items-center justify-center item">
                  <a
                    href={item.path}
                    class="flex lg:px-3 py-2 items-center text-gray-600 hover:text-gray-900">
                    <span> {item.title}</span>
                   
                  </a>
                </li>
              )}
            </>
          ))
        }
      </ul>
     
    </MenuItems>
  </Astronav>
</Container>
<style is:global lang="scss">
  .switch{
    font-family: '思源黑体';
    font-size: 16px;
    font-weight: 500;
  }
  .input{
    border-radius: 2px;
  }
  .input{
    font-family: Source Han Sans;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
  }
  .input::placeholder{
    font-family: Source Han Sans;
    color: #333333;
    font-size: 14px;
    font-weight: normal;
  }
  .item{
    font-family: '思源黑体';
  }
  .header{

    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
  .astronav-dropdown>div{
   
    border: none;
    border-radius: 0 0 8px 8px;
    &>div{
      color: #3D3D3D;
      background-color: #fff;
      font-size: 14px;
      a:hover{
        color: #712C2F;
      }
    }
  }
  .astronav-dropdown button{
    width: 170px;
    &:hover{
      background-color: #712C2F;
    color: #fff;
    border-bottom-left-radius: 8px;
    }
  }
  li{
    box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.3);
  }
  li:last-child{
    border-bottom-right-radius: 8px;
  }
  li:hover{
    background-color: #712C2F;
    color: #fff;
  }
  li:first-child{
    border-bottom-left-radius: 8px;
  }
li+li{
  border-left: 1.5px solid #712C2F;
}

input{
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
button{
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
.register:hover{
  text-decoration:underline;
}
}
</style>